<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style type="text/css" media="screen">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		html,body{
			width: 100%;
			height: 100%;

		}
		.page{
			position: relative;
			width: 100%;
			height: 100%;
			overflow:hidden;
		}
		.scroller{
			min-height: 100%;
		}
		.wrap{
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.list{
			width: 100%;
			height: 200px;
			overflow:hidden;

		}
		.list li{
			height: 100%;
			float: left;
			line-height:200px;
			text-align: center;
			font-size: 40px;
			color: #fff;
		}
		.list li:nth-of-type(1){
			background-color: red;
		}
		.list li:nth-of-type(2){
			background-color: blue;
		}
		.list li:nth-of-type(3){
			background-color: orange;
		}
		.list li:nth-of-type(4){
			background-color: red;
		}
		.list li:nth-of-type(5){
			background-color: blue;
		}
		.list li:nth-of-type(6){
			background-color: orange;
		}
		.nav{
			position: absolute;
			left: 0;
			bottom: 14px;
			width: 100%;
			height: 10px;
			overflow:hidden;
			text-align: center;
		}
		.nav span{
			display: inline-block;
			vertical-align: top;
			width: 10px;
			height: 100%;
			border-radius: 50%;
			background-color:#f3f3f3;
		}
		.nav .active{
			background-color: #6f0;
		}
		.textList li{
			font-size: 16px/36px "微软雅黑";
			border-bottom: 1px solid #333;
			background-color: #f1f1f1;
		}
		.footer{
			width: 100%;
			height: 40px;
			line-height:40px;
			text-align: center;
		}
		.header{
			position: absolute;
			left:0;
			top: -50px;
			width: 100%;
			line-height:50px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="page">
		<div class="scroller">
			<div class="wrap">
				<ul class="list">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
				<nav class="nav">
					<span class="active"></span>
					<span></span>
					<span></span>
				</nav>
			</div>
			<ul id="textList" class="textList"></ul>
			<footer class="footer">上拉加载更多</footer>
			<header class="header">下拉刷新</header>
		</div>
	</div>
	<script type="text/javascript" src="m.touch.js"></script>
	<script type="text/javascript">

		;(function(){
			var list = document.querySelector('#textList');
			console.log(list);
			var inner = '';
			for(var i = 0; i < 100; i++){
				inner+='<li>'+ i +'</li>'
			}

			list.innerHTML = inner;
		})();
		;(function(){
			var wrap = document.querySelector('.wrap');
			var list = document.querySelector('.list');

			var aLi = list.children;
			list.innerHTML+=list.innerHTML;


			list.style.width = aLi.length * wrap.clientWidth + 'px';
			for(var i = 0; i < aLi.length; i++){
				aLi[i].style.width = wrap.clientWidth + 'px';
			}
		})();




		;(function(){
			var page = document.querySelector('.page');
			var scroll = page.children[0];
			var wrap = document.querySelector('.wrap');
			var list = document.querySelector('.list');
			var li = list.querySelectorAll('li');
			var navs = document.querySelectorAll('.nav span');
			var imgW = wrap.clientWidth;
			var now = 0;
			var footer = document.querySelector('.footer');
			var header = document.querySelector('.header');
			var pullStateRange = 50;

			

			swiperBar({
				wrap:page,
				dir:'y',
				backOut:'out',
				start:function(){

				},
				move:function(){
					var min = page.clientHeight - scroll.offsetHeight;
					var y = css(scroll,'translateY');
					if(y >= pullStateRange){
						header.innerHTML = '松手刷新';
					}else{
						header.innerHTML = '下拉刷新';
					}
				},
				end:function(){
					var y = css(scroll,'translateY');
					if(y>=pullStateRange){
						cancelAnimationFrame(scroll.timer);

						startMove({
							el: scroll,
							type: "easeOut",
							time: 200,
							target: {
								translateY:pullStateRange
							},
							callIn: function(){
								header.innerHTML = '更新中';
							},
							callBack: function(){
								setTimeout(()=>{
									header.innerHTML = '更新完成';
									startMove({
										el:scroll,
										type:'easeOut',
										time:200,
										target:{
											translateY:0
										},
										callBack:function(){
											header.innerHTML = '下拉刷新';
										}
									})
								},1000);
							}
						})
					}
				},
				over:function(){
					
					var now = css(scroll,'translateY');
					var min = page.clientHeight - scroll.offsetHeight;
					//console.log(now,min)
					if(now <= min){
						console.log('加载更多');
					}
				}
			});
			


			swiper({
				wrap:wrap,
				dir:'x',
				backOut:'none',

				start: function(){

					list.style.transition = "none";
					/* 处理无缝 */
					if(now == 0){
						now = li.length/2;
					} else if(now == li.length-1){
						now = li.length/2 - 1;
					}
					css(list,"translateX",-now * imgW);
				},
				end: function(){
					cancelAnimationFrame(list.timer);
					//获取手指抬起时，移动的距离
					var nowX = css(list,'translateX');
					now = -Math.round(nowX / imgW);

					nowX = -now*imgW;

					list.style.transition = '.3s';

					css(list,'translateX',nowX);



					for(var i = 0; i < navs.length; i++){
						navs[i].className = '';
					}
					navs[now % navs.length].className = 'active';
					
				}

			});



		})();
	</script>
</body>
</html>
